<template>
    <div>
        <el-button type="primary" style="margin-bottom: 10px;" @click="addCategory">新增分类</el-button>
        <!-- 新增分类的弹出框 -->
        <el-dialog v-model="dialogVisible" :title="id ? '修改分类' : '新增分类'" :before-close="handleBeforeClose">
          <CategoryEdit ref="categoryForm" :id="id" @success="editSuccess" />
        </el-dialog>
        <el-table
      :data="tableData"
      style=" margin-bottom: 20px"
      row-key="id"
      border
    >
      <el-table-column prop="name" label="分类名称" sortable />
      <el-table-column prop="pid" label="分类级别">
        <template #default="{row}">
            <span v-if="row.pid==0">一级分类</span>
            <span v-else>二级分类</span>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="分类编号"/>
      <el-table-column prop="picture" label="分类图片">
        <template #default="{row}">
            <el-image
             v-if="row.picture !== ''" 
            :src="row.picture" 
            :fit="'contain'" 
            style="display: flex; align-items: center; height:60px">
            </el-image>
        </template>
      </el-table-column>
      <!-- 操作按钮 -->
      <el-table-column prop="cz" label="操作" >
        <template #default="{ row }">
          <el-button type="warning" @click="editRow(row)">编辑</el-button>
          <el-button type="danger" @click="delRow(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import { getCategoryList, delCategory } from '../../api/api'
import { ElMessageBox, ElMessage } from 'element-plus'
import CategoryEdit from '../../components/categoryEdit.vue';


const tableData=ref([]);
// const dataInit=[{
//             "id": 1,
//             "name": "潮流女装",
//             "picture": "",
//             "pid": 0
//         },
//         {
//             "id": 2,
//             "name": "羽绒服",
//             "picture": "http://127.0.0.1:8360/static/image/category/clothes/jackets.png",
//             "pid": 1
//         },
//         {
//             "id": 3,
//             "name": "毛呢大衣",
//             "picture": "http://127.0.0.1:8360/static/image/category/clothes/overcoat.jpg",
//             "pid": 1
//         },
//         {
//             "id": 4,
//             "name": "连衣裙",
//             "picture": "http://127.0.0.1:8360/static/image/category/clothes/dress.png",
//             "pid": 1
//         },
//         {
//             "id": 5,
//             "name": "食品",
//             "picture": "",
//             "pid": 0
//         },
//         {
//             "id": 6,
//             "name": "休闲零食",
//             "picture": "http://127.0.0.1:8360/static/image/category/foods/biscuit.jpg",
//             "pid": 5
//         },
//         {
//             "id": 7,
//             "name": "生鲜果蔬",
//             "picture": "http://127.0.0.1:8360/static/image/category/foods/tomato.jpg",
//             "pid": 5
//         },
//         {
//             "id": 8,
//             "name": "饮料汽水",
//             "picture": "http://127.0.0.1:8360/static/image/category/foods/drinks.jpg",
//             "pid": 5
//         },
//         {
//             "id": 9,
//             "name": "四季茗茶",
//             "picture": "http://127.0.0.1:8360/static/image/category/foods/tea.jpg",
//             "pid": 5
//         },
//         {
//             "id": 10,
//             "name": "粮油调味",
//             "picture": "http://127.0.0.1:8360/static/image/category/foods/oil.jpg",
//             "pid": 5
//         },
//         {
//             "id": 11,
//             "name": "珠宝配饰",
//             "picture": "",
//             "pid": 0
//         },
//         {
//             "id": 12,
//             "name": "时尚饰品",
//             "picture": "http://127.0.0.1:8360/static/image/category/jewelry/ornaments.jpg",
//             "pid": 11
//         },
//         {
//             "id": 13,
//             "name": "品质手表",
//             "picture": "http://127.0.0.1:8360/static/image/category/jewelry/watch.jpg",
//             "pid": 11
//         },
//         {
//             "id": 14,
//             "name": "DIY饰品",
//             "picture": "http://127.0.0.1:8360/static/image/category/jewelry/diy.jpg",
//             "pid": 11
//         },
//         {
//             "id": 15,
//             "name": "日用百货",
//             "picture": "",
//             "pid": 0
//         },
//         {
//             "id": 16,
//             "name": "居家日用",
//             "picture": "http://127.0.0.1:8360/static/image/category/store/towel.png",
//             "pid": 15
//         },
//         {
//             "id": 17,
//             "name": "个人清洁",
//             "picture": "http://127.0.0.1:8360/static/image/category/store/paper.png",
//             "pid": 15
//         },
//         {
//             "id": 18,
//             "name": "盆碗碟筷",
//             "picture": "http://127.0.0.1:8360/static/image/category/store/bowl.png",
//             "pid": 15
//         },
//         {
//             "id": 19,
//             "name": "茶杯茶具",
//             "picture": "http://127.0.0.1:8360/static/image/category/store/cup.png",
//             "pid": 15
//         },
//         {
//             "id": 20,
//             "name": "收纳整理",
//             "picture": "http://127.0.0.1:8360/static/image/category/store/box.png",
//             "pid": 15
//         },
//         {
//             "id": 21,
//             "name": "手机数码",
//             "picture": "",
//             "pid": 0
//         },
//         {
//             "id": 22,
//             "name": "手机",
//             "picture": "http://127.0.0.1:8360/static/image/category/phone/phone.png",
//             "pid": 21
//         },
//         {
//             "id": 23,
//             "name": "笔记本",
//             "picture": "http://127.0.0.1:8360/static/image/category/phone/computer.png",
//             "pid": 21
//         },
//         {
//             "id": 24,
//             "name": "数码配件",
//             "picture": "http://127.0.0.1:8360/static/image/category/phone/headset.png",
//             "pid": 21
//         },
//         {
//             "id": 25,
//             "name": "平板",
//             "picture": "http://127.0.0.1:8360/static/image/category/phone/flat.png",
//             "pid": 21
//         },
//         {
//             "id": 26,
//             "name": "相机",
//             "picture": "http://127.0.0.1:8360/static/image/category/phone/camera.png",
//             "pid": 21
//         },
//         {
//             "id": 27,
//             "name": "户外运动",
//             "picture": "",
//             "pid": 0
//         },
//         {
//             "id": 28,
//             "name": "运动鞋",
//             "picture": "http://127.0.0.1:8360/static/image/category/motion/shoes.jpg",
//             "pid": 27
//         },
//         {
//             "id": 29,
//             "name": "球类运动",
//             "picture": "http://127.0.0.1:8360/static/image/category/motion/ball.png",
//             "pid": 27
//         },
//         {
//             "id": 30,
//             "name": "垂钓用品",
//             "picture": "http://127.0.0.1:8360/static/image/category/motion/fishingrod.png",
//             "pid": 27
//         },
//         {
//             "id": 31,
//             "name": "运动服",
//             "picture": "http://127.0.0.1:8360/static/image/category/motion/clothes.png",
//             "pid": 27
//         },
//         {
//             "id": 32,
//             "name": "骑行装备",
//             "picture": "http://127.0.0.1:8360/static/image/category/motion/bicycle.png",
//             "pid": 27
//         },
//         {
//             "id": 33,
//             "name": "电动车",
//             "picture": "http://127.0.0.1:8360/static/image/category/motion/vehicle.png",
//             "pid": 27
//         }
//     ]
const categoryForm=ref();
const dialogVisible = ref(false);
const id = ref(0);

onMounted(()=>{
    loadCategoryList()
})

// 查询分类列表 刷新分类
const loadCategoryList = async () => {
  const data = await getCategoryList()
  tableData.value = convertToTree(data)
}

const convertToTree=(data)=>{
    const treeDate=[];
    const map={};
    for(const item of data){
        //...为扩展运算符，将item对象中所有可遍历属性拷贝到当前对象中
        map[item.id]={...item,children:[]};
    }
    for(const item of data){
        const node=map[item.id];
        if(item.pid===0){
            treeDate.push(node);
        }else{
            const parent=map[item.pid];
            parent.children.push(node)
        }
    }
  
    console.log(treeDate)
    return treeDate;
}

// 删除分类
const delRow = row => {
  if (row.pid == 0 && row.children.length != 0) {
    ElMessage({
      type: 'warning',
      message: '该分类下存在二级分类，请先删除二级分类再删除此分类'
    })
  } else {
    ElMessageBox.confirm('确定要删除此分类吗？', {
      closeOnClickModal: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }).then(async () => {
      if (await delCategory({ id: row.id })) {
        loadCategoryList()
      }
    }).catch(() => {})
  }
}

//新增分类
const addCategory=()=>{
  id.value=0
  dialogVisible.value=true
  if(categoryForm.value){
    categoryForm.value.resetF(0)
  }
 
}
//编辑分类
const editRow=(row)=>{
  dialogVisible.value=true;
  id.value=row.id
  if(categoryForm.value){
    categoryForm.value.resetF(row.id)
  }
}

//关闭时的提示窗
const handleBeforeClose=()=>{
    //确认框提示
    ElMessageBox.confirm("确认要关闭吗？",{
        showClose:false,
        closeOnClickModel:false,
        confirmButtonText:'确定',
        cancelButtonText:'取消',
    })
        .then(()=>{
            dialogVisible.value=false;
        })
        .catch(()=>{})
}

//新增或者修改后关闭对话框
const editSuccess=()=>{
  //关闭对话框
  dialogVisible.value=false;
  //刷新数据
  loadCategoryList();
}
</script>